<!--
 * @Author: Lizhenyu
 * @Date: 2021-09-18 14:03:40
 * @FilePath: \usp-osm-frondend\src\views\orderCenter\carWashOrder\index.vue
-->
<template>
  <div
    class="source"
    v-loading="pageLoading"
    :element-loading-text="loadingText"
  >
    <div class="content">
      <v-notes>
        <div class="filterStyle">
          <el-form
            label-width="120px"
            :model="searchList"
            ref="searchForm"
            class="search-form"
            size="small"
          >
            <el-row class="search-row">
              <el-col :span="24">
                <el-row :gutter="20">
                  <el-col :span="8">
                    <el-form-item label="车辆识别码">
                      <el-input
                        placeholder="车辆识别码"
                        v-model="searchList.vin"
                        @input="searchList.vin=searchList.vin.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5]/g,'')"
                        clearable
                        v-on:keyup.enter.native="searchForm"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="核销码">
                      <el-input
                        placeholder="核销码"
                        v-model="searchList.couponCode"
                        @input="searchList.couponCode=searchList.couponCode.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5]/g,'')"
                        clearable
                        v-on:keyup.enter.native="searchForm"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="门店名称">
                      <el-input
                        placeholder="门店名称"
                        v-model="searchList.shopName"
                        @input="searchList.shopName=searchList.shopName.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5]/g,'')"
                        clearable
                        v-on:keyup.enter.native="searchForm"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-collapse-transition>
                  <div class="filterContent" v-if="showContent">
                    <el-row :gutter="20">
                      <el-col :span="8">
                        <el-form-item label="结算时间">
                          <div class="block">
                            <el-date-picker
                              v-model="searchList.createTime"
                              type="daterange"
                              range-separator="至"
                              :picker-options="pickerOptions"
                              :default-value="[new Date(), new Date()]"
                              value-format="yyyy-MM-dd"
                              start-placeholder="开始时间"
                              end-placeholder="结束时间"
                            ></el-date-picker>
                          </div>
                        </el-form-item>
                      </el-col>
                      <el-col :span="8">
                        <el-form-item label="创建时间">
                          <div class="block">
                            <el-date-picker
                              v-model="searchList.updateTime"
                              type="daterange"
                              range-separator="至"
                              :picker-options="pickerOptions"
                              :default-value="[new Date(), new Date()]"
                              value-format="yyyy-MM-dd"
                              start-placeholder="开始时间"
                              end-placeholder="结束时间"
                            ></el-date-picker>
                          </div>
                        </el-form-item>
                      </el-col>
                    </el-row>
                  </div>
                </el-collapse-transition>
              </el-col>
            </el-row>
            <el-row class="search-row">
              <el-col :span="12" :offset="12" style="text-align: right">
                <el-button
                  @click="closeFilter"
                  :icon="
                    showContent ? 'el-icon-arrow-up' : 'el-icon-arrow-down'
                  "
                  class="white-btn filterClose"
                  >{{ showContent ? '折叠' : '展开' }}</el-button
                >
                <el-button
                  @click="resetForm"
                  icon="el-icon-refresh-left"
                  class="white-btn"
                  >重置</el-button
                >
                <el-button
                  @click="searchForm"
                  icon="el-icon-search"
                  class="dark-btn search-btn"
                  >搜索</el-button
                >
              </el-col>
            </el-row>
          </el-form>
        </div>
      </v-notes>
      <div class="mb-lg">
        <v-table
          :data="tableData"
          ref="table"
          :listLoading="listLoading"
          :loadingText="loadingText"
          :paginationTotal="total"
          :header="false"
          v-on:pageSizeChange="pageSizeChange"
          v-on:currentPageChange="currentPageChange"
          border
          pagination
        >
          <el-table-column
            label="洗车订单号"
            align="center"
            min-width="160"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              <span
                class="edit-item colorLink"
                @click="toDetails(scope.row)"
              >
                {{ scope.row.washOrderNo }}
              </span>
            </template>
          </el-table-column>
          <el-table-column
            label="订单状态"
            align="center"
            min-width="150"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              <span>{{ getDictionaryNameByCode('SUBORDERSTATUS', scope.row.status)  }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="服务类型"
            align="center"
            prop="customerName"
            min-width="110"
            :show-overflow-tooltip="true"
          >
          <template slot-scope="scope">
            <span>{{ getDictionaryNameByCode('WASHORDERSERVICETYPE', scope.row.serviceType)  }}</span>
          </template>
          </el-table-column>
          <el-table-column
            label="用户姓名"
            align="center"
            prop="customerName"
            min-width="110"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            label="手机号码"
            align="center"
            prop="customerMobile"
            min-width="110"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            label="车辆识别码"
            align="center"
            prop="vin"
            min-width="110"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            label="核销码"
            align="center"
            prop="couponCode"
            min-width="110"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            label="门店编号"
            align="center"
            prop="shopCode"
            min-width="110"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            label="门店名称"
            prop="shopName"
            align="center"
            min-width="150"
            :show-overflow-tooltip="true"
          >
          <template slot-scope="scope">
            {{  scope.row.shopName }}
          </template>
          </el-table-column>
          <el-table-column
            label="门店价"
            prop="counterPrice"
            align="center"
            min-width="150"
            :show-overflow-tooltip="true"
          >
          <template slot-scope="scope">
            {{  scope.row.counterPrice | numFormat }}
          </template>
          </el-table-column>
          <el-table-column
            label="结算价"
            prop="settlementPrice"
            align="center"
            min-width="150"
            :show-overflow-tooltip="true"
          >
          <template slot-scope="scope">
            {{  scope.row.settlementPrice | numFormat }}
          </template>
          </el-table-column>
          <el-table-column
            label="结算时间"
            align="center"
            min-width="180"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              {{ scope.row.settlementTime | timestampToChange('time') }}
            </template>
          </el-table-column>
          <el-table-column
            label="创建时间"
            align="center"
            min-width="180"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              {{ scope.row.createTime | timestampToChange('time') }}
            </template>
          </el-table-column>
        </v-table>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import VNotes from '@/components/Notes/index'
import VTable from '@/components/PageTable/index'
import { common } from '@/mixins/common'
import { getCarWashOrderList } from '@/api/order'
export default {
  name: 'carWashOrder',
  components: {
    VTable,
    VNotes
  },
  mixins: [common],
  computed: {
    ...mapGetters(['lookupItems'])
  },
  data () {
    return {
      loadingText: '加载中...',
      pageLoading: false,
      searchList: {
        couponCode: '',
        customerMobile: '',
        customerName: '',
        shopName: '',
        vin: '',
        washOrderNo: '',
        createTime: [],
        updateTime: [],
        displayStart: 0,
        displayLength: 10
      },
      tableData: [],
      total: 0,
      pageSize: 10,
      currentPage: 0,
      listLoading: false,
      showContent: false,
      pickerOptions: {
        disabledDate (time) {
          // 如果没有后面的-8.64e7就是不可以选择今天的
          return time.getTime() > Date.now() // - 8.64e7
        }
      }
    }
  },
  created () {
    this.fetchList()
  },
  mounted () {},
  methods: {
    searchForm () {
      this.currentPage = 0
      this.$refs.table.restPage()
      this.fetchList()
    },
    resetForm () {
      this.searchList = {
        couponCode: '',
        customerMobile: '',
        customerName: '',
        shopName: '',
        vin: '',
        washOrderNo: '',
        createTime: [],
        updateTime: [],
        displayStart: 0,
        displayLength: 10
      }
      this.currentPage = 0
      this.$refs.table.restPage()
      this.fetchList()
    },
    toDetails (row) {
      if (!this.$auth('orderManagement:washOrderManagement:detail')) {
        this.$alert('您没有权限')
        return false
      }
      this.$router.push({ name: 'carWashOrderDetails', params: { data: row } })
    },
    // 获取列表数据
    fetchList () {
      if (!this.$auth('orderManagement:washOrderManagement:list')) {
        this.$alert('您没有权限')
        return false
      }
      this.listLoading = true
      const params = {
        ...this.searchList,
        displayStart: this.currentPage,
        displayLength: this.pageSize,
        createTimeStart: this.searchList.createTime ? new Date(this.searchList.createTime[0] + ' ' + '00:00:00').getTime() : '',
        createTimeEnd: this.searchList.createTime ? new Date(this.searchList.createTime[1] + ' ' + '23:59:59').getTime() : '',
        settlementTimeStart: this.searchList.updateTime ? new Date(this.searchList.updateTime[0] + ' ' + '00:00:00').getTime() : '',
        settlementTimeEnd: this.searchList.updateTime ? new Date(this.searchList.updateTime[1] + ' ' + '23:59:59').getTime() : ''
      }
      getCarWashOrderList(params).then((res) => {
        this.listLoading = false
        if (res) {
          if (Number(res.code) === 1) {
            const obj = res.obj
            this.tableData = obj.data || []
            this.total = obj.total
          } else if (Number(res.code) === 0) {
            this.$confirm(res.msg, {
              confirmButtonText: '确定',
              showCancelButton: false
            })
          } else {
            this.$confirm(this.$t(res.code), {
              confirmButtonText: '确定',
              showCancelButton: false
            })
          }
        }
      })
    },
    closeFilter () {
      this.showContent = !this.showContent
    },
    // 每页数据数目改变
    pageSizeChange (size) {
      this.pageSize = size
      this.searchForm()
    },
    // 当前页改变
    currentPageChange (curPage) {
      this.currentPage = curPage - 1
      this.fetchList()
    }
  }
}
</script>

<style>

</style>
